<template>
	<view >
		<view class="coupon-top" >
			<view :class="content1==true? 'coupon_btn' : 'nocoupon_btn'" @click="content()">待使用</view>
			<view :class="content2==true? 'coupon_btn' : 'nocoupon_btn'" @click="content()">已使用/失效</view>
		</view>
		<view v-if="content2==true">
			
			<u-empty 
					
					icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
					text="暂无已使用/失效优惠券"
					textColor="#666"
					width="400rpx"
					height="400rpx"
			></u-empty>
			
		</view>
		
		<view v-else-if="content1==true" class="content" >
			
			<img :show-menu-by-longpress="true"
					@click="previewImage" 
					class="code-img" 
					src="http://shuati26.kptedu.com/uploads/image/qrcode.jpg"></img>
			
			<view class="code-bom">
				您暂时没有可用的优惠券，长按识别获取优惠券
			</view>
			<view class="wxcode">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<image style="width: 30rpx ;height: 30rpx ;border-radius:50px ;margin-right: 10rpx;" src="../../../static/img/pay1.jpg"></image>
					<text style="color: #9c9c9c;">添加学管师微信：</text>
					<text>&nbsp;{{wxcode}}</text>
				</view>
				
				
				<text @click="copy(wxcode)">点击复制</text>
			</view>
			
			<text class="qr-bom">
				打开微信——粘贴复制——添加好友
			</text>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				content1:true,
				content2:false,
				wxcode:'GongXue-kefu',
			}
		},
		onShow() {
			
		},
		methods: {
			copy(value){
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
						     title: '复制成功'
						    })
					}
				})
			},
			previewImage(e){
			        uni.previewImage({
			            // 需要预览的图片链接列表。若无需预览，可以注释urls
			            urls: [e.target.src],
			            // 为当前显示图片的链接/索引值
			            current: e.target.src,
			            // 图片指示器样式 
			            indicator:'default',
			            // 是否可循环预览
			            loop:false,
			            // 长按图片显示操作菜单，如不填默认为保存相册
			   longPressActions:{
			    itemList:[this.l('发送给朋友'),this.l]
			   },
			   success: res => {
			    console.log('previewImage res', res);
			   }, 
			   fail: err => {
			    console.log('previewImage err', err);
			   }
			  });
			},
			content(){
				if(this.content1==false){
					this.content2=false
					this.content1=true
				}else if(this.content2==false){
					this.content2=true
					this.content1=false
				}
				
			}
			}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(to top, #9e9e9e47, #ffffff);
		
	}
	.coupon-top{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		
	}
	.coupon_btn{
		font-size: 23rpx;
		padding: 15rpx 20rpx;
		background: #38cefb;
		border-radius: 10rpx;
		
		color: #ffffff;
		margin: 10rpx 0 10rpx 20rpx;

	}
	.nocoupon_btn{
		font-size: 23rpx;
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		background-color:#ffffff;
		color: #9c9c9c;
		margin: 10rpx 0 10rpx 20rpx;
	}
	.content{
		border-radius: 20rpx 20rpx 0 0 ;
		background-color: #efefef;
		display: flex;
		flex-flow: column wrap;
	}
	.code-img{
		width: 40%;
		    height: 300rpx;
		    height: 300rpx;
		    margin: auto;
		    margin-top: 40rpx;
		    padding: 15rpx;
		    border: 1px #9c9c9c solid;
	}
	.code-bom{
		color: #6b6b6b;
		    font-size: 23rpx;
		    
		    margin: auto;
		    
		    margin: 20px auto;
	}
	.wxcode{
		    margin: auto;
		        display: flex;
		        justify-content: space-between;
		        align-items: center;
		        flex-direction: row;
		        width: 80%;
		        background: #d8d8d8;
		        height: 70rpx;
		        border-radius: 10rpx;
		        font-size: 25rpx;
		        padding: 0 30rpx;
			
	}
	.wxcode>text:nth-child(2){
			background-color: #dbf6fe;
			color: #65c4e2;
		    border-radius: 50rpx;
		    font-size: 20rpx;
		    padding: 5rpx 20rpx;
			margin-left: 20rpx;
	}
	.qr-bom{
			color: #9c9c9c;
		    font-size: 23rpx;
		    
		    margin: auto;
		    
		    margin: 20px auto;
	}
</style>
